<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Type Ahead 👀</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <form class="search-form">
    <input type="text" class="search" placeholder="City or State">
    <ul class="suggestions">
      <li>Filter for a city</li>
      <li>or a state</li>
    </ul>
  </form>
<script>
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const cities = [];
fetch(endpoint)
   .then(blob => blob.json ())
   .then(data => cities.push(...data))

// let cities = [];
// fetch(endpoint)
//    .then(blob => blob.json())
//    .then(data => cities=data)
console.log(cities)
function findMatches(wordToMatch,cities){
  return cities.filter(place =>{
    const regex = new RegExp(wordToMatch,'gi');
    return place.city.match(regex) || place.state.match(regex)
  })
}
// 千分位
function numberWithCommas(x) {
  // \B非单词边界 防止前面有东西
  // https://gitee.com/janking/Infinite-f2e/issues/IDWPH
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

function displayMatches(){
  const matchArray = findMatches(this.value,cities);
  const html = matchArray.map(place =>{
    const regex = new RegExp(this.value,'gi');
    const cityName = place.city.replace(regex,`<span class="hl">${this.value}</span>`);
    const stateName = place.state.replace(regex,`<span class="hl">${this.value}</span>`);
    return `
    <li>
      <span class="name">${cityName},${stateName}</span>
      <span class="population">${numberWithCommas(place.population)}</span>  
    </li>
    `;
  }).join('');
  suggestions.innerHTML = html;
}
const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');
// searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);
</script>
</body>
</html>
